<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul</title>

    <style>
        *{
            margin:0;padding:0;
        }
        .list-wrap1{
            width:600px;
            margin:0 auto;
            overflow: hidden;
            height:600px;

        }

        .wrap{
            width:600px;
            margin:0 auto;
            overflow: hidden;

        }
       .wrap li{
           float:left;
           width:33.333%;
           list-style: none;
           margin-top:40px;
       }
        .list-wrap1 li img{

            width:100%;
            display: block;

        }

    </style>



</head>
<body>
<div>
   <div class="list-wrap1">
        <ul class="wrap">
            <li class="item">
                <img src="./img/topic-1.jpg">
            </li>
            <li class="item">
                <img src="./img/topic-2.jpg">
            </li>
            <li class="item">
                <img src="./img/topic-3.jpg">
            </li>

        </ul>
    </div>
   <!-- <div class="list-wrap1">
        <ul class="wrap">
            <li class="item">
                <img src="./img/topic-3.jpg">
            </li>

        </ul>
    </div>-->

</div>
<script src="./vendors/jquery-1.10.2/jquery.js"></script>
<script>
    $(function(){

        if($(".list-wrap1 .wrap li").length == 1){
            $(" .list-wrap1 .wrap li ").css('width','100%')

        }else{
            $(" .list-wrap1 .wrap li").css('width','33.33%')
        }

    })

</script>
</body>
</html>